<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>
        <span class="headerSpan"></span>添加分类<el-button
          size="small"
          icon="el-icon-arrow-left"
          @click="$router.go(-1)"
          >返回</el-button
        ></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="addClassify">
      <div class="addClassify_hed">添加分类</div>
      <!-- form表单区域 -->
      <el-form
        :model="addClassifyForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称:" prop="name" label-width="130px">
          <el-input v-model="addClassifyForm.name"></el-input>
        </el-form-item>
        <el-form-item label="上级分类:" label-width="130px">
          <el-cascader
            v-model="addClassifyForm.parentId"
            :options="superiorClassify"
            clearable
            @change="changeClassify"
            :props="{ checkStrictly: true }"
          ></el-cascader>
          <div class="tishi">不选择分类默认为顶级分类</div>
        </el-form-item>
        <el-form-item label="排序:" prop="seq" label-width="130px">
          <el-input v-model="addClassifyForm.seq"></el-input>
        </el-form-item>
        <el-form-item label="是否显示:" prop="isShow" label-width="130px">
          <el-input v-model="addClassifyForm.isShow"></el-input>
        </el-form-item>
        <el-form-item
          label="是否显示在导航栏:"
          prop="isMenu"
          label-width="130px"
        >
          <el-input v-model="addClassifyForm.isMenu"></el-input>
        </el-form-item>
        <el-form-item label="选择模板:" label-width="130px">
          <el-cascader
            v-model="addClassifyForm.templateId"
            :options="superiorTemplate"
            @change="changeTemplate"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label-width="130px">
          <el-button type="primary" @click="addClassify()">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      addClassifyForm: {
        name: null,
        isShow: null,
        isMenu: null,
        seq: null,
        parentId: null,
        templateId: null
      },
      superiorClassify: [],
      superiorTemplate: [],
      rules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async getClassify() {
      const { data: res } = await this.$http.get('/category/findAllCategory')
      // let arr = []
      // res.PageResult.rows.forEach(item => {
      //   arr.push({
      //     value: item.id,
      //     label: item.name
      //   })
      // })
      // this.superiorClassify = arr
      this.superiorClassify = res.PageResult.rows
      console.log(res)
    },
    async getTemplate() {
      const { data: res } = await this.$http.get('/template/findAllTemplate')
      console.log(res)
      let arr = []
      res.PageResult.rows.forEach(item => {
        arr.push({
          value: item.id,
          label: item.name
        })
      })
      this.superiorTemplate = arr
      console.log(res)
    },
    changeClassify(value) {
      // console.log(value.length)
      if (value.length !== 2) {
        this.addClassifyForm.parentId = value[0]
      } else {
        this.addClassifyForm.parentId = value[1]
      }
    },
    changeTemplate(value) {
      this.addClassifyForm.templateId = value[0]
      // console.log(value)
    },
    addClassify() {
      console.log('提交了')
      console.log(this.addClassifyForm)
      this.$router.push('/goods/classify')
    }
  },
  created() {
    this.getClassify()
    this.getTemplate()
  }
}
</script>
<style lang="less" scoped>
.addClassify {
  position: relative;
  margin: 20px 40px 20px 20px;
  border: 1px solid #e6e6e6;

  .addClassify_hed {
    width: 100%;
    height: 45px;
    padding-left: 20px;
    color: #666666;
    font-size: 12px;
    line-height: 45px;
    border-bottom: 1px solid #e6e6e6;
    background-color: #f3f3f3;
  }
  .el-form {
    position: absolute;
    top: 100px;
    left: 300px;
    .el-input,
    .el-cascader {
      width: 250px;
    }
  }
  .tishi {
    color: #aaa;
  }
}
.el-form-item__label {
  width: 130px !important;
}
.el-form-item__content {
  margin-left: 130px !important;
}
</style>
